<template>
  <div>
    <div>
      <van-nav-bar
          title="充值详情"
          left-arrow
          @click-left="onClickLeft"
      />
    </div>
    <div class="statedetail">
      <span class="moneydetail">+{{topup.rechargeAmount}}₱</span>
      <span class="state">{{topup.status==1?'充值中':(topup.status==2?'待支付':(topup.status==3?'充值成功':(topup.status==4?'交易关闭':'充值失败')))}}</span>
      <van-button v-if="topup.status==2" type="info" style="margin-top: 160px;margin-right: 20px" @click="gopay">去支付</van-button>
      <van-button v-if="topup.status==2" type="info" @click="cancelpay">取消支付</van-button>
    </div>
    <hr color="#f3f3f3"/>
    <div class="statemessage">
      <van-cell style="text-align: left" title="充值说明" :value="topup.rechargeChannels==1 ? '微信支付' : (topup.rechargeChannels==2 ? '支付宝支付' : '贝宝支付')" />
      <van-cell style="text-align: left" title="充值进度">
        <div class="step">
          <van-steps direction="vertical" active="1">
            <van-step v-for="(item,index) in options" :key="index" style="height: 60px">
              <template v-slot:inactive-icon>
                <van-icon :name="item.icon" :class="item.classActive"/>
              </template>
              <template v-slot:active-icon>
                <van-icon :name="item.icon" :class="item.classActive"/>
              </template>
              <h3 style="color: #7d7d7d;font-size: 12px;text-align: left;margin-left: 25px">{{item.text}}</h3>
              <p style="color: #7d7d7d;font-size: 12px">{{ item.date|formatTimer }}</p>
            </van-step>
          </van-steps>
        </div>
      </van-cell>
      <van-cell style="text-align: left" title="创建时间" :value="topup.createTime|formatTimer" />
      <van-cell style="text-align: left" title="交易单号" :value="topup.transactionNumber" />
    </div>
    <van-dialog v-model="show" title="微信支付" show-cancel-button>
      <qr-code-component :text="data.url" />
    </van-dialog>
  </div>
</template>

<script>
import axios from "axios";
import QrCodeComponent from "@/views/Mine/mywallet/wxQRcode.vue";
import * as $ from "@/utils/request";

export default {
  components: {QrCodeComponent},
  data(){
    return {
      topup:{},
      options:[],
      id:'',
      data:'',
      show:false
    }
  },
  // 日期过滤器
  filters: {
    formatTimer: function(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m;
    }
  },
  mounted() {
    let id = this.$route.query.id;
    this.id=id
    if(id!=null||id!=''){
      this.getTopupbyId(id);
    }
  },
  methods: {
    //监听订单状态
    countDown(orderId){
      var interval = setInterval(()=> {
        //定时器,每3秒执行一次
        $.post("http://localhost:11219/mine/topup/checkWx/"+orderId).then(res=>{
          if(this.show==false){
            clearInterval(interval);
          }
          if (res.data == 'SUCCESS'|| res.data == 'PAYERROR') {
            clearInterval(interval);

            if(res.data == 'SUCCESS'){
              this.$toast("充值成功")
              this.show=false
            }
            if(res.data == 'PAYERROR'){
              this.$toast("充值失败")
              this.show=false
            }
          }
        });
      }, 3000);
    },
    // 去支付
    gopay(){
      if(this.topup.rechargeChannels==2){
        axios.get('http://localhost:11219/mine/topup/alipay/' + this.topup.id).then(res => {
          this.$router.push({
            path: '/alipay',
            query: {
              formData: res
            }
          })
        });
      }else if(this.topup.rechargeChannels==1){
        axios.post('http://localhost:11219/mine/topup/subWx/'+this.topup.id).then(res => {
          console.log(res)
          this.data=res.data
          this.show = true
          this.countDown(this.data.orderId)
        })
      }
      this.options=[]
      this.getTopupbyId(this.id)
    },
    // 取消支付
    cancelpay(){
        axios.get('http://localhost:11219/mine/topup/cancelpay/'+this.topup.id).then(res=>{
          this.$toast("订单取消");
          this.options=[]
          this.getTopupbyId(this.id)
        })
    },
    // 跳转充值记录页面
    onClickLeft() {
      this.$router.push({
        path: '/topuprecord'
      })
    },
    // 根据id查询充值详情
    getTopupbyId(id){
      axios.get('http://localhost:11219/mine/topup/gettopupbyid/'+id).then(res=>{
        this.topup=res.data;
        if(this.topup.status==1){
          this.options.push(
              {
                text:"处理中",
                icon:'checked',
                classActive:"successClass",
                date:this.topup.createTime
              },
          )
        }else if(this.topup.status==2){
          this.options.push(
              {
                text:"待支付",
                icon:'warning',
                classActive:"warningClass",
                date:this.topup.createTime
              },
          )
        }else if(this.topup.status==3){
          this.options.push(
              {
                text:"处理中",
                icon:'checked',
                classActive:"successClass",
                date:this.topup.createTime
              },
              {
                text:"充值成功",
                icon:'checked',
                classActive:"successClass",
                date:this.topup.fuTime
              },
          )
        }else if(this.topup.status==4){
          this.options.push(
              {
                text:"处理中",
                icon:'checked',
                classActive:"successClass",
                date:this.topup.createTime
              },
              {
                text:"交易关闭",
                icon:'clear',
                classActive:"closeClass",
                date:this.topup.closingTime
              },
          )
        }else{
          this.options.push(
              {
                text:"处理中",
                icon:'checked',
                classActive:"successClass",
                date:this.topup.createTime
              },
              {
                text:"充值失败",
                icon:'clear',
                classActive:"errorClass",
                date:this.topup.fuTime
              },
          )
        }
      })
    }
  }
}
</script>

<style scoped>
.statedetail{
  width: 100%;
  height: 230px;
  background-color: #ffffff;
}
.statedetail .moneydetail{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 50px;
  font-size: 40px;

}
.statedetail .state{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 120px;
  color: #9ca1a7;
}
.statemessage{
  width: 100%;
  height: 100%;
  background-color: white;
}
.step{
  width: 100%;
  height: 150px;
  float: right;
}
.successClass {
  color: #07c160;
  font-size: 20px;
}
.errorClass {
  color: #ee0a24;
  font-size: 20px;
}
.warningClass {
  color: #e6a23c;
  font-size: 20px;
}
.closeClass {
  color: #bbbbbb;
  font-size: 20px;
}
</style>
